import React ,{Component} from "react";  
import CommonHead from "../../components/commonHead"
import {connect} from "react-redux"
import axios from "axios";
import { Button, Toast } from 'antd-mobile';
function successToast() {
    Toast.success('恭喜您，登录成功！！！', 1);
  }

function showToast(msg) {
Toast.info(msg, 1);
}
export default class Login extends Component{
    login=()=>{
        var name = this.refs.name.value;
        var userpwd = this.refs.userpwd.value;
        const {dispatch,history}=this.props;
        var flag1=false;
        var flag2=false;
        
        var reg1=/^[a-zA-Z$_\u4e00-\u9fa5]{1}[a-zA-Z$_0-9\u4e00-\u9fa5]{5,9}$/g;
        if(reg1.test(name)){
            flag1=true;
        }else{
            flag1=false;
        }
        var reg2=/^[a-zA-Z$_0-9]{6,20}$/g;
        if(reg2.test(userpwd)){
            flag2=true;
        }else{
            flag2=false;
        }
        
        if(flag1&&flag2){
            axios.post("/login",{
                username:name,
                pwd:userpwd
            })
            .then(res=>{
                switch(res.data){
                     case 1:
                     history.push("/layout/index")
                     successToast()
                  break;
                    case 2:
                    showToast("用户名或密码不正确")
                  break;
                    case 3:
                  showToast("用户名或密码不合法")
                  
                  break;
                  case 4:
                  showToast("服务器故障")
                  
                  break;
                }
            })
        }else{
            showToast("用户名或密码不合法")
            
        }

        
    }
   
    render(){
        const {history} = this.props;
        return (
            <div className="login">
                <CommonHead title="登录" show={true} history={history}/>
                <div className="loginContent clearfix">
                    <input className="username" type="text" placeholder="账号" ref="name"/>
                    <span className="usernameSpan">
                        <i className="iconfont icon-tixingtishi"></i>
                        可使用美妆嘉人账号直接登录
                    </span>
                    <input className="pwd" type="password" placeholder="密码" ref="userpwd"/>
                    <span className="pwdSpan"><i className="iconfont icon-shuangjiantouyou"></i>忘记密码</span>

                    <input className="btn" type="button" value="登录" onClick={this.login}/>
                    <span className="btnSpan"><i className="iconfont icon-shuangjiantouyou"></i>随便看看</span>
                    <div className="qiTa">
                        <span className="weibo">
                            <i className="iconfont icon-weibo"></i>
                        </span>
                        <span className="QQ">
                            <i className="iconfont icon-qq-copy"></i>
                        </span>
                        <span className="weixin">
                            <i className="iconfont icon-weixin"></i>
                        </span>
                    </div>
                    <input className="registerBtn" type="button" onClick={()=>{history.push("/register")}} value="立即注册"/>
                </div>
                
            </div>
        )
    }

}